import { Component, createRef } from "react";
import { Button } from "antd";
import { init, type EChartsType } from "echarts";

import style from "./index.module.css";

export default class Workplace extends Component {
  boxRef = createRef<HTMLDivElement>();
  ins: EChartsType | null = null;

  render() {
    return (
      <div>
        <h2>工作台</h2>

        <Button onClick={this.reRender}>重新设置图表</Button>

        {/* 提供一个给到 echarts 容器 */}
        <div ref={this.boxRef} className={style.box}></div>
      </div>
    );
  }

  componentDidMount() {
    // 初始化 echarts
    this.ins = init(this.boxRef.current);
    // 调用 echarts 实例的 setOption 方法来配置选项
    this.ins.setOption({
      // 全局调色盘
      // color: ["red", "green", "blue"],
      // 图例
      legend: {},
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "男",
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
        {
          name: "女",
          data: [20, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
        // {
        //   data: [10, 200, 150, 80, 70, 110, 130],
        //   type: "bar",
        // },
        // {
        //   data: [50, 200, 150, 80, 70, 110, 130],
        //   type: "bar",
        // },
        // {
        //   data: [60, 200, 150, 80, 70, 110, 130],
        //   type: "bar",
        // },
      ],
    });
    // 监听resize事件，然后让ehcarts实例也跟着resize
    window.addEventListener("resize", this.handleResize);

    // 监听图例选择事件
    this.ins.on("legendselectchanged", (...rest) => {
      console.log("legendselectchanged", rest);
    });
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.handleResize);
    // 组件渲染的时候，最好可以做一个 echarts 实例的销毁工作
    this.ins?.dispose();
  }

  handleResize = () => {
    this.ins?.resize();
  };

  reRender = () => {
    // 要修改 echarts 的图表的配置，直接再次调用 setOption 即可
    // 且可以只传递需要改变的配置，其他没有传递的配置则使用上次的配置
    this.ins?.setOption({
      series: [
        {
          data: [1, 2, 3, 4, 5, 6, 7],
          type: "bar",
        },
      ],
    });
  };
}
